<template>
  <el-menu
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    router
  >
    <el-sub-menu
      v-for="(subnode, index) in sysnodes.filter((n) => n.pid === 1)"
      :key="'sub-' + index"
      :index="index"
    >
      <template #title>
        <el-icon><location /></el-icon>
        <span>{{ subnode.title }}</span>
      </template>

      <el-menu-item
        :index="itemnode.path"
        v-for="itemnode in sysnodes.filter((n) => n.pid === subnode.id)"
        :key="'itemnod - ' + itemnode.id"
        >{{ itemnode.title }}</el-menu-item
      >
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'

import { useMenus } from '@/stores/menu.js'
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue'
const menusStore = useMenus()
const { isCollapse, sysnodes } = storeToRefs(menusStore)
onMounted(() => {
  menusStore.loadmenu()
})
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  border-right-width: 0;
}
</style>
